<template>
  <!-- <div :style="'width:'+attr.width+'px;height:'+attr.height+'px;'" class="content"> -->
  <div>
    <div v-for="(item,index) in content" :key="index">
      <baseContainer :list="item" v-if="item.name == 'base-container'" />
      <div v-if="item.name == 'text'">文本</div>
      <navBar :list="item" v-if="item.name == 'navBar'" view></navBar>
      <grid :list="item" v-if="item.name == 'grid'" view></grid>
      <swipe :list="item" v-if="item.name == 'swipe'" view></swipe>
      <tmpForm :list="item" v-if="item.name == 'form'" view></tmpForm>
      <tmpEditor :list="item" v-if="item.name == 'richText'" view></tmpEditor>
      <cell :list="item" v-if="item.name == 'cell'" view></cell>
      <choujiang :list="item" v-if="item.name == 'lucky'" view></choujiang>
      <noticeBar :list="item" v-if="item.name == 'noticeBar'" view></noticeBar>
    </div>
  </div>
</template>

<script>
import baseContainer from 'components/base-container'
import navBar from 'components/navBar'
// import content from 'top/content.json'
import grid from 'components/grid'
import swipe from 'components/swipe'
import tmpForm from 'components/form'
import tmpEditor from 'components/tmpEditor'
import cell from 'components/cell'
import choujiang from 'components/choujiang'
import noticeBar from 'components/noticeBar' 

export default {
  components:{
    baseContainer,
    navBar,
    grid,
    swipe,
    tmpForm,
    tmpEditor,
    cell,
    choujiang,
    noticeBar
  },
  data() {
    return {
      content:[]
    }
  },
  created() {
    this.content = JSON.parse(sessionStorage.getItem("view-content"))
  },
  methods: {

  },
  computed:{
    attr(){
      return this.$store.state.drawing.attr
    },
  }
}
</script>

<style scoped>
  @import url('../static/css/common.css');
  .content{
    margin: 50px auto 0;
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgb(29 31 37 / 18%);
  }
</style>